import classnames from 'classnames';
import { useContext } from 'react';
import { MenuContext } from './';

export interface MenuItemProps {
    index?: string;
    disabled?: boolean;
    className?: string;
    style?: React.CSSProperties;
    children?: React.ReactNode;
}

const MenuItem = (props: MenuItemProps) => {
    const { className, style, disabled, children, index } = props;
    const context = useContext(MenuContext);
    const classes = classnames('f-menu-item', className, {
        'f-is-disabled': disabled,
        'f-is-active': context.index === index
    });
    const handleClick = () => {
        if (context.onSelect && !disabled && typeof index === 'string') {
            context.onSelect(index);
        }
    };


    return (
        <li className={classes} style={style} onClick={handleClick}>
            {children}
        </li>
    );
};

MenuItem.displayName = 'MenuItem';
export default MenuItem;